<template>
  <div>
    <div>
      <ST :title="stname"></ST>
    </div>
    <div class="Trailer-wrap">
      <div class="Trailer-item">
        <div class="Trailer-item-left">
          <img
            src="https://obj.pipi.cn/friday/226adc16504f7aab46b6ee8593357748.jpg?imageView2/1/w/120/h/68"
            alt=""
          />
        </div>
        <div class="Trailer-item-right">
          <div>如果声音不记得如果声音不记得如果声音不记得如果声音不记得</div>
          <p>26.5万</p>
        </div>
      </div>
      <div class="Trailer-item">
        <div class="Trailer-item-left">
          <img
            src="https://obj.pipi.cn/friday/226adc16504f7aab46b6ee8593357748.jpg?imageView2/1/w/120/h/68"
            alt=""
          />
        </div>
        <div class="Trailer-item-right">
          <div>如果声音不记得如果声音不记得如果声音不记得如果声音不记得</div>
          <p>26.5万</p>
        </div>
      </div>
      <div class="Trailer-item">
        <div class="Trailer-item-left">
          <img
            src="https://obj.pipi.cn/friday/226adc16504f7aab46b6ee8593357748.jpg?imageView2/1/w/120/h/68"
            alt=""
          />
        </div>
        <div class="Trailer-item-right">
          <div>如果声音不记得如果声音不记得如果声音不记得如果声音不记得</div>
          <p>26.5万</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.Trailer-wrap{
    margin-top: 20px;
.Trailer-item {
  width: 360px;
  height: 68px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  .Trailer-item-left {
    width: 120px;
    height: 68px;
    img {
      width: 120px;
      height: 68px;
    }
  }
  .Trailer-item-right {
    width: 224px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    div {
      color: #333;
      font-size: 16px;
      margin-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 5px 0 5px 8px;
        border-style: solid;
        border-color: transparent transparent transparent #d8d8d8;
      }
    }
  }
}
}
</style>
<script>
import ST from "./SmallTitle";
export default {
  data() {
    return {
      stname: "预告片",
    };
  },
  components: {
    ST,
  },
};
</script>
